<template>
  <div>
    <div class="head-container">
      <el-input
        v-model="tblDatabaseName"
        placeholder="请输入库名"
        style="width: 200px; margin-right: 20px"
      />
      <el-input
        v-model="tblName"
        placeholder="请输入表名"
        style="width: 200px; margin-right: 20px"
      />
      <el-button
        class="filter-item"
        size="mini"
        type="success"
        icon="el-icon-search"
        @click="search"
        >搜索</el-button
      >
      <el-button
        style="margin-left: 10px"
        class="filter-item"
        size="mini"
        type="warning"
        icon="el-icon-refresh-left"
        @click="reset"
        >重置</el-button
      >
    </div>
    <el-button
      type="primary"
      size="mini"
      :disabled="multipleSelection.length == 0"
      style="margin-bottom: 10px"
      @click="treeFlag = true"
      >批量确认</el-button
    >
    <el-table :data="tblList" @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" width="55" />
      <el-table-column prop="libName" label="库名" />
      <el-table-column prop="tblName" label="表名" />
      <el-table-column prop="time" label="确认时间" />
      <el-table-column prop="status" label="当前状态" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.status != '已确认'"
            @click="treeFlag = true"
            >确认</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :close-on-click-modal="false"
      :before-close="treeCloses"
      :visible.sync="treeFlag"
      append-to-body
      title="树形菜单"
      width="1000px"
    >
      <el-row>
        <el-col :span="6">
          <el-tree
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
            default-expand-all
          ></el-tree>
        </el-col>
        <el-col :span="18">
          <div>
            <el-form :inline="true" label-width="80px">
              <el-form-item label="字段名" label-width="60px">
                <el-input
                  v-model="filedForm.name"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
              <el-form-item label="中文名" label-width="60px">
                <el-input
                  v-model="filedForm.chinese"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
              <el-button type="primary" size="mini">查询</el-button>
              <el-button type="primary" size="mini">清空</el-button>
            </el-form>
            <el-table :data="treeTable">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="name" label="字段名" />
              <el-table-column prop="chinese" label="字段中文名" />
              <el-table-column prop="length" label="字段长度" />
              <el-table-column prop="type" label="字段类型" />
              <el-table-column prop="subarea" label="是否为分区字段" />
              <el-table-column prop="key" label="是否为主键" />
            </el-table>
          </div>
          <div style="margin-left: 70%; margin-top: 3%">
            <el-button type="primary" size="mini" @click="executeFlag = true"
              >执行时间设置</el-button
            >
            <el-button type="primary" size="mini">立刻执行</el-button>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :before-close="executeCloses"
      :visible.sync="executeFlag"
      append-to-body
      title="执行时间设置"
      width="400px"
    >
      <el-tooltip
        class="item"
        effect="dark"
        content="何时进行同步"
        placement="top"
      >
        <i
          class="el-icon-question"
          style="font-size: 16px; position: absolute; top: 9%; left: 33%"
        ></i>
      </el-tooltip>
      <el-form :inline="true" label-width="120px">
        <el-form-item label="时间范围">
          <el-select
            v-model="execute"
            placeholder="请选择"
            style="width: 190px"
            clearable
          >
            <el-option v-for="val in executeList" :label="val" :value="val" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="executeCloses">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tblDatabaseName: "",
      tblName: "",
      tblList: [
        {
          libName: "lib_A",
          tblName: "tbl_A",
          time: "2023-8-10 14:11:10",
          status: "待确认",
        },
        {
          libName: "lib_B",
          tblName: "tbl_B",
          time: "2023-8-11 12:17:14",
          status: "已确认",
        },
      ],
      treeData: [
        {
          label: "数据库对象",
          children: [
            {
              label: "表",
              children: [
                { label: "af_cluster" },
                { label: "af_database" },
                { label: "af_project" },
                { label: "af_status" },
                { label: "sys_log" },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      filedForm: {
        name: "",
        chinese: "",
      },
      treeTable: [
        {
          name: "cluster",
          chinese: "集群",
          length: "10",
          type: "string",
          subarea: "是",
          key: "是",
        },
      ],
      multipleSelection: [],
      treeFlag: false,
      executeFlag: false,
      execute: "",
      executeList: [
        "00点",
        "01点",
        "02点",
        "03点",
        "04点",
        "05点",
        "06点",
        "07点",
        "08点",
        "09点",
        "10点",
        "11点",
        "12点",
        "13点",
        "14点",
        "15点",
        "16点",
        "17点",
        "18点",
        "19点",
        "20点",
        "21点",
        "22点",
        "23点",
      ],
    };
  },
  methods: {
    search() {
      console.log("search");
      //   this.getBasicData();
    },
    reset() {
      this.tblName = "";
      this.tblDatabaseName = "";
      //   this.getBasicData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    treeCloses() {
      this.treeFlag = false;
    },
    handleNodeClick(data) {
      if (data.label == "af_database") {
        this.treeTable = [
          {
            name: "database",
            chinese: "数据库",
            length: "10",
            type: "string",
            subarea: "是",
            key: "是",
          },
        ];
      } else if (data.label == "af_project") {
        this.treeTable = [
          {
            name: "project",
            chinese: "计划",
            length: "10",
            type: "string",
            subarea: "是",
            key: "是",
          },
        ];
      } else if (data.label == "af_status") {
        this.treeTable = [
          {
            name: "status",
            chinese: "状态",
            length: "10",
            type: "string",
            subarea: "是",
            key: "是",
          },
        ];
      } else if (data.label == "sys_log") {
        this.treeTable = [
          {
            name: "log",
            chinese: "日志",
            length: "10",
            type: "string",
            subarea: "是",
            key: "是",
          },
        ];
      } else {
        this.treeTable = [
          {
            name: "cluster",
            chinese: "集群",
            length: "10",
            type: "string",
            subarea: "是",
            key: "是",
          },
        ];
      }
    },
    executeCloses() {
      this.executeFlag = false;
    },
  },
};
</script>

<style>
</style>